<template>
  <!-- 头部导航 -->
  <div class="nav-container">
    <ul id="navigationBar" @touchmove="slideMove">
      <li v-for="(navItem, index) in navList" :key="index" @click="handleNavClick(index, navItem.name)">
        <div class="nav-item-logo">
          <img :src="navItem.isActive ? navItem.imgActive : navItem.img" alt="" />
        </div>
        <div :class="{ 'nav-item-text': true, 'active-text': navItem.isActive }">{{ navItem.text }}</div>
      </li>
    </ul>
    <!--虚拟滚动条-->
    <div class="scrollFake" id="scrollFake">
      <div class="scrollBar" :style="{ left: slideLeft + 'px' }" id="scrollBar"></div>
    </div>
  </div>
</template>

<script>
import LegalAdvice from "@/assets/images/legal_advice.png";
import LegalAdviceActive from "@/assets/images/legal_advice_active.png";
import IntelligentSearch from "@/assets/images/intelligent_search.png";
import IntelligentSearchActive from "@/assets/images/intelligent_search_active.png";
import LegalReview from "@/assets/images/legal_review.png";
import LegalReviewActive from "@/assets/images/legal_review_active.png";
import LegalService from "@/assets/images/legal_service.png";
import LegalServiceActive from "@/assets/images/legal_service_active.png";
import legalPolicyLibrary from "@/assets/images/legalPolicyLibrary.png";
import manageActive from "@/assets/images/manageActive.png";
import manage from "@/assets/images/manage.png";
export default {
  name: "NavIndex",
  data() {
    return {
      navList: [
        //导航列表信息
        {
          text: "法律服务",
          name: "legal-service-container",
          img: LegalService,
          imgActive: LegalServiceActive,
          isActive: false,
        },
        {
          text: "法律智答",
          name: "legal-advice-container",
          img: LegalAdvice,
          imgActive: LegalAdviceActive,
          isActive: true,
        },
        {
          text: "资信智查",
          name: "sintelligent-search-container",
          img: IntelligentSearch,
          imgActive: IntelligentSearchActive,
          isActive: false,
        },
        {
          text: "广告智审",
          name: "legal-review-container",
          img: LegalReview,
          imgActive: LegalReviewActive,
          isActive: false,
        },
        {
          text: "法律政策库",
          name: "legalPolicyLibrary",
          img: legalPolicyLibrary,
          imgActive: legalPolicyLibrary,
          isActive: false,
        },
        {
          text: "经营许可资质",
          name: "businessPermit",
          img: manage,
          imgActive: manageActive,
          isActive: false,
        },
      ],
      slideLeft: 0, //滑块动态left值
      scrollBarWidth: 0, //滑块宽度
      navWidth: 0, //导航栏宽度
      slidingRegionDom: null, //滑动区域dom
      scrollAreaWidth: 0, //滑动区域可见宽度
      actualWidth: 0, //滑块区域实际宽度
    };
  },
  methods: {
    //导航列表点击切换事件
    handleNavClick(index, name) {
      switch (name) {
        case "legal-review-container":
          //如果点击的是法律审核，则跳转到法律审核页面
          this.$router.push({ name: "LegalReview" });
          return;
        case "legalPolicyLibrary":
          //当点击的是法律政策库，则跳转到法律政策库页面
          this.$router.push({ name: "legalPolicyLibrary" });
          return;
        case "businessPermit":
          //当点击的是经营许可资质，则跳转到经营许可资质页面
          this.$router.push({ name: "businessPermit" });
          return;
      }
      this.navList.forEach((item, i) => {
        item.isActive = index == i;
      });
      this.$emit("handleActive", name);
    },
    slideMove(a) {
      // 根据滑动区域的滚动位置和实际宽度，计算滑动比例
      const scale = this.slidingRegionDom.scrollLeft / (this.actualWidth - this.scrollAreaWidth);
      // 根据计算得到的滑动比例，调整导航条左侧偏移量，以实现滑动效果
      this.slideLeft = (this.navWidth - this.scrollBarWidth) * scale;
    },
    //DOM获取
    domGain() {
      this.navWidth = document.getElementById("scrollFake").offsetWidth; //导航栏宽度
      this.scrollBarWidth = document.getElementById("scrollBar").offsetWidth; //滑块宽度
      this.slidingRegionDom = document.getElementById("navigationBar"); //滑动区域DOM
      this.scrollAreaWidth = this.slidingRegionDom.offsetWidth; //滑块区域可见宽度
      this.actualWidth = this.slidingRegionDom.scrollWidth; //滑块区域实际宽度
    },
  },
  mounted() {
    this.domGain();
  },
};
</script>

<style lang="less" scoped>
@import url("@/assets/styles/nav/index.less");
.scrollFake {
  margin: 0 auto;
  width: 87px;
  height: 8px;
  border-radius: 10px;
  position: relative;
  top: 14px;
  background: rgba(232, 232, 232, 1);
  border: 1px solid #ccc;

  .scrollBar {
    position: absolute;
    height: 100%;
    width: 40px;
    border-radius: 5px;
    left: 0;
    background: rgba(26, 133, 255, 1);
  }
}
</style>
